<template>
    <!-- 用户指南 -->
    <div class="user-guide-page layout-media-box">
        <div class="l-panel">
            <div class="panel-body panel-guide">
                <div v-for="(item, index) in questionsList" :key="index">
                    <div>
                        <span class="title-icon question-icon">问</span>
                        <span class="question-text">{{item.questions}}</span>
                    </div>
                    <div class="guide-line">
                        <span class="title-icon answer-icon">答</span>
                        <span class="answer-text">{{item.answer}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            questionsList: [],
        };
    },
    methods: {
        getQuestionsListPc() {
            let para = {
                // questionsType: ''
                questionsType: this.$authInfo.getAuthType() == "P" ? 1 : this.$authInfo.getAuthType() == "D" ? 2 : ''
            }
            // console.log(para)
            this.$ajax.getQuestionsListPc(para).then(res => {
                // console.log(res)
                this.questionsList = res.data.list
            }).catch(err => {
                this.$message({
                    message: err.msg,
                    type: 'error',
                })
            })
        }
    },
    mounted() {
        this.getQuestionsListPc()
    },
};
</script>

<style lang="scss">
.user-guide-page {
    .panel-guide {
        min-height: 715px;

        div {
            margin-top: 10px;
            color: #3c3c3c;
        }

        div + div {
            margin-top: 18px;
        }
    }

    .title-icon {
        display: inline-block;
        width: 30px;
        height: 30px;
        padding-left: 8px;
        line-height: 30px;
        border-radius: 50%;
        font-weight: 500;
    }

    .question-icon {
        background: #fde2e2;
        color: #e53b46;
    }

    .question-text {
        font-weight: bold;
        margin-left: 17px;
        font-size: 16px;
    }

    .answer-icon {
        background: #d9ecff;
        color: #006db8;
    }

    .answer-text {
        font-size: 14px;
        margin-left: 17px;
    }
    .guide-line {
        padding-bottom: 20px;
        border-bottom: 1px dotted #dfdfdf;
    }
}
</style>
